<template>
  <view class="content">
    <view class="tips">
      <text>{{ tips }}</text>
    </view>

    <view class="guide-box">
      <navigator v-for="(item, ind) in entryInfos" class="guide_box" :key="ind" :url="item.navigateTo">
        <image class="guide_icon" :src="item.icon" mode="aspectFit" />
        <view class="guide_label" v-html="item.title"></view>
        <view class="guide_label sub_title" v-html="item.subtitle"></view>
      </navigator>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      // 目前仅base页面以供参考，其他页面尚未整理。
      
      wxEntry: [
        {
          icon: require("../assets/img/interactionLive.png"),
          subtitle: "《基础推拉流》",
          title: "视频直播",
          navigateTo: "./wxmini/base"
        },
        // {
        //   icon: require("../assets/img/interactionLive.png"),
        //   subtitle: "摄像头、麦克风等",
        //   title: "基础演示",
        //   navigateTo: "./wxmini/native"
        // },
        // {
        //   icon: require("../assets/img/interactionLive.png"),
        //   subtitle: "《实时消息》",
        //   title: "视频直播",
        //   navigateTo: "./wxmini/message"
        // },
        // {
        //   icon: require("../assets/img/interactionLive.png"),
        //   subtitle: "CDN",
        //   title: "视频直播",
        //   navigateTo: "./wxmini/cdn"
        // },
        // {
        //   icon: require("../assets/img/interactionLive.png"),
        //   subtitle: "混流",
        //   title: "视频直播",
        //   navigateTo: "./wxmini/mix"
        // }
      ],
      h5Entry: [
        {
          icon: require("../assets/img/interactionLive.png"),
          subtitle: "基础推拉流",
          // title: "视频直播",
          navigateTo: "./h5/base"
        },
        // {
        //   icon: require("../assets/img/interactionLive.png"),
        //   subtitle: "视频、屏幕采集",
        //   title: "自定义采集",
        //   navigateTo: "./h5/customCapture"
        // },
        // {
        //   icon: require("../assets/img/interactionLive.png"),
        //   subtitle: "CDN",
        //   title: "视频直播",
        //   navigateTo: "./h5/cdn"
        // },
        // {
        //   icon: require("../assets/img/interactionLive.png"),
        //   subtitle: "混流/混音",
        //   title: "视频直播",
        //   navigateTo: "./h5/mix"
        // }
      ]
    }
  },
  computed: {
    tips() {
      // #ifdef MP-WEIXIN
      return "本小程序展示即构科技实时音视频能力"
      // #endif
      // #ifdef H5
      return "本页面展示即构科技实时音视频能力"
      // #endif
    },
    entryInfos() {
      // #ifdef MP-WEIXIN
      return this.wxEntry
      // #endif
      // #ifdef H5
      return this.h5Entry
      // #endif
    }
  },

  methods: {}
}
</script>

<style scoped>
.content {
  position: relative;
  width: 100vw;
  height: 100vh;
}

.tips {
  color: #3c3c3c;
  font-size: 12px;
  text-align: center;
  padding: 22 rpx 0 22 rpx;
  margin-top: 3vh;
}

.guide-box {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  margin: 0 2vw;
}

.guide_box {
  width: 112px;
  height: 112px;
  background-color: rgba(13, 112, 255, 0.7);
  text-align: center;
  margin: 1vw;
  vertical-align: top;
}

.guide_icon {
  display: block;
  width: 36px;
  height: 36px;
  margin: 16px auto 0;
}

.guide_label {
  display: block;
  margin-top: 10px;
  color: white;
  font-size: 32rpx;
  font-family: "PingFang SC";
}

.guide_label.sub_title {
  font-size: 28rpx;
  color: #ffffff;
  margin-top: 2rpx;
}
</style>
